<template>
  <view class="status-text">
    <!-- 警告 -->
    <view class="state-text error-color" v-if="current.stateType === StateTypes.error">
      <text class="main-text">{{ $t('Navigator.Home.ApplianceStatus.Error.Text') }}</text>
      <text v-if="current.stateText">{{ current.stateText }}</text>
    </view>
    <!-- 在线 -->
    <view class="state-text" v-if="current.stateType === StateTypes.online">
      <text>{{ $t('Navigator.Home.ApplianceStatus.Online.Text') }}</text>
    </view>
    <!-- 运行 -->
    <view class="state-text" v-if="current.stateType === StateTypes.running">
      <text class="main-text">{{ $t('Navigator.Home.ApplianceStatus.Runing.Text') }}</text>
      <!-- 运行时间 -->
      <text v-if="current.timeDuration">{{
        $t('Navigator.Home.ApplianceStatus.Runing.TimeText.Text').replace('{time}', current.timeDuration)
      }}</text>
    </view>
    <!-- 预约 -->
    <view class="state-text" v-if="current.stateType === StateTypes.reserved">
      <text class="main-text">{{ $t('Navigator.Home.ApplianceStatus.Reserved.Text') }}</text>
      <text v-if="current.timeDuration">{{
        $t('Navigator.Home.ApplianceStatus.Reserved.TimeText.Text').replace('{time}', current.timeDuration)
      }}</text>
    </view>
    <!-- 离线 -->
    <view class="state-text offline-color" v-if="current.stateType === StateTypes.offline">
      <text>{{ $t('Navigator.Home.ApplianceStatus.Offline.Text') }}</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import type { ApplianceData } from '@/types/appliance'
import { StateTypes } from '@/constants/Appliance'

defineProps<{
  current: ApplianceData
}>()
</script>

<style scoped lang="less">
.status-text {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.state-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--primary-color);
  &.error-color {
    color: var(--danger-color);
  }
  &.offline-color {
    color: #818790;
  }

  .main-text {
    margin-right: 6rpx;
  }
}
</style>
